import React, { Component } from 'react'
import Header from '../../components/Header/Header'
import { List,Tabs } from 'antd-mobile'
import './Coupon.less'
import {reqcoupon} from '../../request/api'
import {filterTime} from "../../filters/index"

export default class coupon extends Component {
    constructor(){
        super();
        this.state={
            coupons:[],
            titles:['未使用','已使用','已过期']
        }
    }
    componentDidMount(){
        reqcoupon().then(d=>{
            if(d.data.code ===200){
                this.setState({
                    coupons:d.data.list
                })
            }
        })
    }
    render() {
        let {titles,coupons}=this.state
        console.log(coupons);
        
        return (
            <div>
                <Header title="优惠券" back></Header>
                <div className="coupon">
                    <Tabs>
                        {
                            coupons.map((item,ind)=>(
                                <Tabs.Tab title={titles[ind]} key={ind}>
                                    {
                                        item.content.map(item=>(
                                            <List.Item key={item.id}>
                                                <h3>{item.money}</h3>
                                                <div>{item.title}</div>
                                                <p>{item.description}</p>
                                                <p>有效时间：{item.begintime?filterTime(item.begintime):null}</p>
                                                <p>失效时间：{item.endtime?filterTime(item.endtime):null}</p>
                                            </List.Item>                                       
                                        ))
                                    }

                                </Tabs.Tab>
                            ))
                        }
                    </Tabs>
                </div>
            </div>
        )
    }
}
